<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>X2PERFORMANCE :: Home</title>
<script type="text/javascript" src="assets/js/jquery-1.5.2.min.js"></script>

<script type="text/javascript">
	//grid width and height
var bw = 400;
var bh = 400;
//padding around grid
var p = 10;
//size of canvas
var cw = bw + (p*2) + 1;
var ch = bh + (p*2) + 1;

var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('body');

var context = canvas.get(0).getContext("2d");

function drawBoard(){
    for (var x = 0; x <= bw; x += 40) {
        context.moveTo(0.5 + x + p, p);
        context.lineTo(0.5 + x + p, bh + p);
    }


    for (var x = 0; x <= bh; x += 40) {
        context.moveTo(p, 0.5 + x + p);
        context.lineTo(bw + p, 0.5 + x + p);
    }

    context.strokeStyle = "black";
    context.stroke();
}

drawBoard();
​
</script>
<style type="text/css">
	body {
    background: lightblue;
}

canvas {
    background: #fff;
    margin: 20px;
}
</style>
</head>
<body>
	<canvas id="myCanvas">
    <p>Canvas not supported.</p>
</canvas>
</body>
</html>